window.onload = function(){
    //添加button的响应事件
    document.querySelector('header button').addEventListener('click',addList);
    let deleteBtn = document.querySelectorAll('ul li button');
    for(let i=0 ; i<deleteBtn.length ; i++){
        deleteBtn[i].addEventListener('click',deleteList);
    }
}

//增加表单
function addList(){
    let ul = document.querySelector('ul');
    let lis = document.querySelectorAll('ul li');
    let newLi = document.createElement('li');
    let oInput = document.querySelector('input');
    //当输入为空时不添加表单
    if(oInput.value == ''){
        alert('没有输入字符！');
    }
    else{
        if(lis.length%2==0)
        newLi.className = 'odd';
        else 
            newLi.className = 'even';
        newLi.innerHTML = oInput.value + '<button onclick=deleteList()>✖</button>';
        ul.appendChild(newLi);
        oInput.value = '';
    }
}

//删除表单
function deleteList(){
    let ul = document.querySelector('ul');
    ul.removeChild(event.target.parentElement);

    //重置表单的背景颜色
    let lis = document.querySelectorAll('ul li');
    for(let i=0 ; i<lis.length ; i++){
        if(i%2 == 0)
            lis[i].className = 'odd';
        else  
            lis[i].className = 'even';
    }
}

